<template>
    <div class="reader-header">
        <div class="reader-header__left">
            <span class="reader-header__title">
                {{ props.currentTaskInfo?.taskName }} 
            </span>
        </div>

        <div class="reader-header__center">
            <!-- 分页 -->
            <div class="reader-header__page" >
                <el-button type="info" class="reader-header__btn" text bg size="large">
                    <i class="fa-solid fa-left-long"></i>
                </el-button>
                <div class="reader-header__page-num">
                    <span class="text">1</span>
                </div>
                <el-button type="text" class="reader-header__btn" text bg size="large">
                    <i class="fa-solid fa-right-long"></i>
                </el-button>
            </div>

            <el-divider direction="vertical" />

            <!-- 缩放 -->
            <div class="reader-header__scale">
                <el-button type="text" class="reader-header__btn" text bg size="large">
                    <i class="fa-solid fa-up-long"></i>
                </el-button>
                <span class="text">
                    100% <i class="iconfont icon-caret-down"></i>
                </span>
                <el-button type="text" class="reader-header__btn" text bg size="large">
                    <i class="fa-solid fa-down-long"></i>
                </el-button>
            </div>

            <el-divider direction="vertical" />

            <!-- 查找标注 -->
            <div class="reader-header__functions">
                <el-button type="text" class="reader-header__btn" text bg size="large">
                    <i class="fa-solid fa-magnifying-glass"></i> 查找
                </el-button>
                <el-button type="text" class="reader-header__btn" text bg size="large">
                    <i class="fa-solid fa-pen-nib"></i> 标注
                </el-button>
            </div>

            <el-divider direction="vertical" />

            <!-- 翻译 -->
            <div class="reader-header__functions">
                <el-button type="text" class="reader-header__btn" text bg size="large">
                    <i class="fa-solid fa-earth-americas"></i> 文档翻译
                </el-button>
            </div>
        </div>

        <!-- 右侧头像 -->
        <div class="reader-header__avatars">
            <div class="avatar-group">
                <el-avatar 
                    v-for="item in avatarGroup" 
                    :key="item" 
                    :size="30" 
                    :src="imagePathByPath(item)">
                </el-avatar>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    currentTaskInfo: { type: Object, default: () => ({}) },
    currentSceneInfo: { type: Object, default: () => ({}) }
});

const avatarGroup = ref([]);

watch(
    () => props.currentSceneInfo,
    (newVal) => {
        if (newVal && newVal.readerQueryAgentEngineer) {
            nextTick(() => {
                avatarGroup.value = [
                    newVal.summaryAgentEngineerEntity.roleAvatar,
                    newVal.readerQueryAgentEngineerEntity.roleAvatar
                ];
            });
        }
    },
    { deep: true }
);
</script>

<style lang="scss" scoped>
.reader-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    height: 58px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 1px 24px 0 rgba(0, 0, 0, .06), 0 0 1px 0 rgba(0, 0, 0, .08);
    position: relative;

    &__left {
        display: flex;
        align-items: center;
    }

    &__title {
        font-size: 16px;
        font-weight: 600;
        color: #292d32;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 560px;
        white-space: nowrap;
        margin: 0 16px 0 4px;
    }

    &__center {
        display: flex;
        justify-content: center;
        flex: 1;
        align-items: center;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
    }

    &__page {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
    }

    &__page-num .text {
        font-size: 14px;
    }

    &__scale {
        display: flex;
        align-items: center;
        position: relative;
        gap: 10px;
        .text {
            font-size: 14px;
        }
    }

    &__functions {
        display: flex;
        gap: 8px;
    }

    &__btn {
        color: #292d32;
        cursor: pointer;
    }

    &__avatars .avatar-group {
        display: flex;
        gap: 10px;
    }
}
</style>